<template>
  <div>
    <simple-data-dialog
      :title="$t('tenant.roleManage.authMenu')"
      :visible.sync="roleDialogVisible"
      :size="size"
    >
      <div class="text-show">
        <div>{{ $t('tenant.roleManage.roleName') }}:{{ role.roleName }}</div>
        <div>{{ $t('tenant.roleManage.roleCode') }}:{{ role.roleCode }}</div>
      </div>
      <div class="flex_x_start">
        <div class="left">
          <div class="left_title">{{ $t('tenant.roleManage.selectList') }}</div>
          <div class="left_content">
            <el-tree
              ref="authTree"
              :data="treeData"
              :props=" {label: 'menuName',children: 'portalMenuInfoVOList'}"
              node-key="menuCode"
              :default-checked-keys="checkedKeys"
              show-checkbox
              @check-change="handleCheckChange"
            />
          </div>
        </div>
        <div class="flex">
          <el-button
            type="danger"
            @click="delTable"
          >{{ $t('common.delete') }}</el-button>
          <data-table
            ref="roleTable"
            :table-data="selectTableData"
            :column="column"
            :table-option="tableOption"
          />
        </div>
      </div>
      <div
        slot="footer"
        class="dialog_btn"
      >
        <el-button @click="roleDialogVisible=false">{{ $t('common.cancel') }}</el-button>
        <!-- <el-button @click="reset('dialog')">{{$t('common.reset')}}</el-button> -->
        <el-button
          type="primary"
          @click="submitForm"
        >{{ $t('common.ok') }}</el-button>
      </div>
    </simple-data-dialog>

  </div>
</template>

<script>
import { mapState } from 'vuex'
import DataTable from '@/components/DataTable'
import SimpleDataDialog from '@/components/SimpleDataDialog'
import portalApi from '@/api/portal/portal'
export default {
  name: '',
  components: {
    DataTable,
    SimpleDataDialog
  },
  data() {
    return {
      roleDialogVisible: false,
      tableOption: {
        option: {
          height: 450,
          showHeaderBtn: false,
          enableSelected: true
        },
        event: {
          selectionChange: this.selectionChange
        }
      },
      column: {
        // 表头
        data: [
          {
            label: this.$t('tenant.roleManage.index'),
            prop: 'index',
            show: true
          },
          {
            label: this.$t('tenant.roleManage.menuName'),
            prop: 'menuName',
            show: true,
            format: (row) => {
              return row.nameList.toString().replace(/,/g, '/')
            }
          }
        ]
      },
      checkedNodes: [], // tree勾选的数据
      checkedKeys: [], // tree勾选数据的key
      selectTableData: [], // tree勾选的数据
      treeData: [],
      selectTable: [], // table勾选的数据
      role: {},
      size: 'big'
    }
  },
  computed: {
    ...mapState({
      merchantCode: state => state.user.merchantCode
    })
  },
  methods: {
    show() {
      this.roleDialogVisible = true
      this.$nextTick(() => {
        this.$refs.authTree.setCheckedKeys(this.checkedKeys)
        this.handleCheckChange()
      })
    },

    // tree勾选
    handleCheckChange() {
      // 获取所有已选menuId(包括半选状态)
      this.checkedNodes = this.$refs.authTree.getCheckedNodes().concat(this.$refs.authTree.getHalfCheckedNodes())
      // 获取已选id
      this.checkedKeys = this.$refs.authTree.getCheckedKeys(true)
      // 获取全选状态
      const checkedNodesTable = this.$refs.authTree.getCheckedNodes()
      const table = this.dealCheckedNodes(checkedNodesTable, [])
      this.selectTableData = table
    },
    // 获取tree最小层级
    dealCheckedNodes(data, list) {
      data.map(item => {
        if (item.portalMenuInfoVOList && item.portalMenuInfoVOList.length > 0) {
          this.dealCheckedNodes(item.portalMenuInfoVOList, list)
        } else {
          const nameList = this.findParent(item.menuCode)
          item.nameList = nameList
          list.push(item)
        }
      })
      return Array.from(new Set(list))
    },
    // 获取某个值的所有上级
    findParent(key, flattenTree = this.checkedNodes) {
      const parentArr = [] // 存储所有的父级元素
      function find(key, flattenTree) {
        flattenTree.forEach(ele => {
          if (ele.menuCode === key) {
            parentArr.unshift(ele.menuName)
            find(ele.parentMenuCode, flattenTree)
          }
        })
      }
      find(key, flattenTree)
      return parentArr
    },

    submitForm() {
      const selectMenu = this.$refs.authTree.getCheckedNodes().concat(this.$refs.authTree.getHalfCheckedNodes())
      // eslint-disable-next-line eqeqeq
      if (selectMenu.length == 0) {
        this.$message.warning(this.$t('common.record'))
        return
      }
      const menuCodes = []
      selectMenu.map(item => {
        menuCodes.push({ roleCode: this.role.roleCode, menuCode: item.menuCode, parentMenuCode: item.parentMenuCode, merchantCode: this.merchantCode })
      })
      console.log(menuCodes)
      portalApi.roleAuth(menuCodes).then(res => {
        this.$message.success(this.$t('common.operationSuccess'))
        this.roleDialogVisible = false
        this.$emit('resetList')
      })
    },
    // 删除
    delTable() {
      this.selectTable.map((v, indexV) => {
        this.selectTableData.map((item, index) => {
          // eslint-disable-next-line eqeqeq
          if (v.menuCode == item.menuCode) {
            // this.selectTable.splice(indexV, 1);
            this.selectTableData.splice(index, 1)
          }
        })
        this.checkedKeys.map((k, index1) => {
          // eslint-disable-next-line eqeqeq
          if (v.menuCode == k) {
            this.checkedKeys.splice(index1, 1)
          }
        })
      })
      this.$refs.authTree.setCheckedKeys(this.checkedKeys)
    },
    selectionChange(data) {
      this.selectTable = data
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .dialog {
  min-height: 800px;
}

::v-deep .el-dialog__wrapper .el-dialog__body {
  flex: 1 1 0%;
}
.flex_x_start {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.left {
  width: 400px;
  margin-top: 40px;
  border: 1px solid #ebeef5;
}
.left_title {
  height: 50px;
  line-height: 50px;
  background-color: #f5f5f5;
  color: #000000;
  font-weight: 500;
  font-size: 14px;
  padding: 0 20px;
}
.left_content {
  height: 400px;
  padding: 10px;
  overflow-y: auto;
}
.flex {
  flex: 1;
  padding-left: 20px;
}
.text-show {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 20px 10px 0;
  font-size: 16px;
  font-weight: 600;
}
</style>
